<template>
  <div class="content_box">
    <!-- <img class="img_top" src="https://tpp-admin.oss-cn-beijing.aliyuncs.com/rich/20230826/3YNou3MVhqdyvVVIJ1ys.png" alt="">
    <div class="img1">
      <img class="img1" src="https://tpp-admin.oss-cn-beijing.aliyuncs.com/rich/20230826/UIOrGnlo1B8TQchcrO8M.png" alt="">
      <p v-if="couponMsg.receiveNum">开业活动进行中...</p>
      <p v-else>活动已结束</p>
    </div>
    <div class="img_bottom">
      <img src="https://tpp-admin.oss-cn-beijing.aliyuncs.com/rich/20230826/USfcOigMtfnZft5BXpoq.png" alt="">
      <div class="quan_box">
        <div class="box1">
           折扣券 
          <div class="left" v-if="couponMsg.activityStuffVo.couponType == 1">
            <p><span>{{couponMsg.activityStuffVo.discount}}</span>折</p>
            *{{couponMsg.activityStuffVo.receiveNum}}张
          </div>

            指定金额
          <div class="left" v-if="couponMsg.activityStuffVo.couponType == 0">
            <p><span>{{couponMsg.activityStuffVo.amount}}</span>元</p>
            *{{couponMsg.activityStuffVo.receiveNum}}张
          </div>

          满减券
          <div class="left" v-if="couponMsg.activityStuffVo.couponType == 2">
            <p><span>{{couponMsg.activityStuffVo.subtract}}</span>元</p>
            *{{couponMsg.activityStuffVo.receiveNum}}张
          </div>
          <div class="right">
            <p class="name">{{couponMsg.activityStuffVo.name}}</p>
            <p class="text">{{couponMsg.activityStuffVo.remark}}</p>
          </div>
        </div>
      </div>
    </div>
    <block v-if="couponMsg">
      <div class="anniu" v-if="!couponMsg.receive" @click="submit">
        一键领取
      </div>
      <p class="anniu on_anniu" v-else>已领取</p>
    </block>
    <p class="anniu on_anniu" v-else >活动已结束</p> -->
    <img mode="widthFix" class="bj" :src="couponMsg.img" alt="">
    <div class="nr_box">
      <div class="img_bottom">
        <div class="quan_box">
          <div class="box1">
            <!-- 折扣券  -->
            <div class="left" v-if="couponMsg.activityStuffVo.couponType == 1">
              <p><span>{{couponMsg.activityStuffVo.discount}}</span>折</p>
              *{{couponMsg.activityStuffVo.receiveNum}}张
            </div>

              <!-- 指定金额 -->
            <div class="left" v-if="couponMsg.activityStuffVo.couponType == 0">
              <p><span>{{couponMsg.activityStuffVo.amount}}</span>元</p>
              *{{couponMsg.activityStuffVo.receiveNum}}张
            </div>

            <!-- 满减券 -->
            <div class="left" v-if="couponMsg.activityStuffVo.couponType == 2">
              <p><span>{{couponMsg.activityStuffVo.subtract}}</span>元</p>
              *{{couponMsg.activityStuffVo.receiveNum}}张
            </div>
            <div class="right">
              <p class="name">{{couponMsg.activityStuffVo.stuffName}}</p>
              <p class="text">{{couponMsg.activityStuffVo.remark}}</p>
            </div>
          </div>
        </div>
      </div>
      <block v-if="couponMsg&&couponMsg.img">
        <div class="anniu" v-if="!couponMsg.receive" @click="submit">
          一键领取
        </div>
        <p class="anniu on_anniu" v-else>已领取</p>
      </block>
      <p class="anniu on_anniu" v-else >活动已结束</p>
    </div>
  </div>
</template>

<script>
import { 
  getToken,
  getUserPhone
} from "@/utils/auth";
import { getForFreeCoupon,getCoupon,getActivityDetails,getActivityCoupon } from "@/api/index";
export default {
  data() {
    return {
      couponMsg:{},
      activityId:''
    };
  },
  methods: {

    // 领取
    submit(){
      const that = this
      if(!getUserPhone()){
        wx.navigateTo({
          url: '/pages/authorization/main',
        });
        return
      }
      // if (wx.requestSubscribeMessage) {
        wx.requestSubscribeMessage({
            tmplIds: ['zmxYAeleG6MXlQ14TjDLn-1KMnJPZkZK2PdsEkJT0aE','Dl8ecYiIeEPc351gti0HX9Tm34e1KidPNpubAXshYMo'],
            success: (res) => {
                console.log(res);
                // if(res["zmxYAeleG6MXlQ14TjDLn-1KMnJPZkZK2PdsEkJT0aE"] == 'accept' && res["Dl8ecYiIeEPc351gti0HX9Tm34e1KidPNpubAXshYMo"] == 'accept'){
                  that.$showLoading('领取中...')
                  getActivityCoupon({activityId:this.activityId}).then(res=>{
                    if(res.statusCode == '00000'){
                      setTimeout(() => {
                        wx.hideLoading()
                        wx.showModal({
                          title: '温馨提示',
                          content: '恭喜，领取成功！',
                          cancelText: '首页',
                          confirmText:'我的优惠',
                          success: (res)=>{
                            if (res.confirm) {//这里是点击了确定以后
                              wx.redirectTo({
                                url: '/pages/coupon/main'
                              })
                            }else{
                              wx.switchTab({
                                url: '/pages/home/main',
                              })
                            }
                          }
                        })
                      }, 1000);
                    }else{
                      this.$toast(res.message)
                    }
                  })
                // }else{
                //     that.guideOpenSubscribeMessage();
                // }
            },
            fail: (res) => {
                console.log(res)
                if (res.errCode == 20004) {
                    that.guideOpenSubscribeMessage();
                }
                console.log("取消")
            },
            complete: (errMsg) => {
                console.log("订阅消息 完成 " + errMsg); 
            }
        })
    // }
    },

    guideOpenSubscribeMessage() {    
      var that = this;
      wx.showModal({         
        title: '提示',
        content: '检测到您没有开启订阅消息的权限，是否去设置？',
        success: function (sm) {
          if (sm.confirm) {// 用户点击了确定 可以调用删除方法了            
              wx.openSetting();
          } else if (sm.cancel) { 
              wx.showToast({
                  title: '您没有同意授权订阅消息，领取失败',
                  icon: 'none'
              }); 
          }
        }
      })    
    },
    
    // 优惠券详情
    getCouponMsg(){
      // this.couponList = []
      // getForFreeCoupon().then(res=>{
      //   if(res.statusCode == '00000'){
      //     this.couponMsg = res.data
      //     if(res.data.couponList && res.data.couponList.length){
      //       this.couponList.push(res.data.couponList[0])
      //     }
      //     console.log(this.couponList)
      //   }
      // })
      getActivityDetails({activityId:this.activityId}).then(res=>{
        if(res.statusCode == '00000'){
          this.couponMsg = res.data
        }
      })
    }
  },
  onShow(){
    if(!getToken()){
      wx.login({
        success:(res)=>{
          let code = res.code
          this.$store.dispatch("userLogin", code).then(res=>{
            if(res.statusCode == '00000'){
              this.getCouponMsg()
            }
          })
        }
      })
    }else{
      this.getCouponMsg()
    }
  },
  onLoad(options) {
    console.log(options)
    if(options.scene){// 扫码进来
      this.activityId = options.scene
    }else{// 传值进来
      this.activityId = options.activityId
    }
    //判断手机机型，动态给底部添加样式
    wx.getSystemInfo({
      success: (res) => {
        console.log("手机信息res" + res.model);
        let modelmes = res.model;
        if (
          modelmes.search("iPhone 14") != -1 ||
          modelmes.search("iPhone 13") != -1 ||
          modelmes.search("iPhone 12") != -1 ||
          modelmes.search("iPhone 11") != -1 ||
          modelmes.search("iPhone X") != -1 ||
          modelmes.search("iPhone XR") != -1 ||
          modelmes.search("iPhone XS") != -1
        ) {
          this.isIphoneXnum = 25;
        } else {
          this.isIphoneXnum = 10;
        }
      },
    });
  },
};
</script>

<style lang="scss" scoped>
/* 去除button默认样式 */

  button::after {
   border: none;
  }

  button {
    background-color: transparent;
    padding-left: 0;
    padding-right: 0;
    line-height:inherit;
  }
  button {
  border-radius:0;
}
.content_box {
  position: relative;
  .bj{
    width: 100%;
  }
  .nr_box{
    width: 100%;
    position: absolute;
    top:1142rpx;
  }
  .img_bottom{
    text-align: center;
    margin-top:64rpx;
    position: relative;
    img{
      width: 618rpx;
      height: 490rpx;
    }
    .quan_box{
      position: absolute;
      bottom:50rpx;
      width: 100%;
      margin:0 auto;
      .box1{
        width: 75%;
        height: 150rpx;
        margin:0 auto;
        display: flex;
        align-items: center;
        .left{
          display: flex;
          justify-content: center;
          align-items: baseline;
          width: 50%;
          font-size: 30rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #FE6706;
          span{
            font-size: 70rpx;
            font-family: DINAlternate-Bold, DINAlternate;
            font-weight: bold;
            color: #FE6706;
          }
        }
        .right{
          width: 48%;
          text-align: center;
          .name{
            width: 80%;
            font-size: 34rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            margin:0 auto;
            margin-bottom:6rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .text{
            width: 80%;
            margin:0 auto;
            font-size: 26rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            color: #B5B5B5;
            overflow: hidden;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
          }
        }
      }
    }
  }
  .anniu{
    width: 686rpx;
    height: 96rpx;
    line-height: 96rpx;
    background: #00C200;
    box-shadow: 0rpx 12rpx 32rpx 0rpx rgba(0,194,0,0.3);
    border-radius: 44rpx;
    text-align: center;
    font-size: 36rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    margin:110rpx auto 0 auto;
    &.on_anniu{
      background: rgba(0,194,0,0.3);
      box-shadow: 0rpx 12rpx 32rpx 0rpx rgba(0,194,0,0.15);
    }
  }
}

</style>